.header
  width: 100%
  height: 400px
  background: #6c5ce7
  color: white
  font-family: 'Lato'
  text-align: center
  padding-top: 100px
  box-sizing: border-box
  font-weight: 300
  .title
    font-size: 50px
    margin: 0
  .sub-title
    font-size: 20px

.image-start
  width: 700px
  height: 300px
  background: white
  padding: 20px
  box-sizing: border-box
  margin-top: -100px
  margin-left: auto
  margin-right: auto
  border-radius: 5px
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25)
  font-family: 'Lato'
  font-size: 20px
  color: grey
  text-align: center
  position: relative
  &.dragover
    .inner-border
      width: calc(100% - 40px)
      height: calc(100% - 40px)
      top: 20px
      left: 20px
      border-color: rgba(0, 0, 0, 0.6)
    .inner-content
      button
        opacity: 0
      .or-text
        opacity: 0
      .main-drop-text
        font-size: 30px
  .inner-border
    width: calc(100% - 20px)
    height: calc(100% - 20px)
    position: absolute
    left: 10px
    top: 10px
    border: 5px dashed rgba(0, 0, 0, 0.25)
    box-sizing: border-box
    transition: all 0.3s
  .inner-content
    box-sizing: border-box
    width: calc(100% - 40px)
    top: 50px
    z-index: 10
    position: absolute
    .or-text, .main-drop-text
      transition: all 0.3s
    button
      border: none
      padding: 10px 20px
      border-radius: 5px
      color: white
      background: #6c5ce7
      outline: none
      font-family: inherit
      cursor: pointer
      transition: all 0.3s
.feature
  width: 100%
  margin-top: 100px
  text-align: center
  a
    color: black
    font-weight: bold
  img
    width: 90%
  .feature-text
    width: 50%
    text-align: center
    margin-left: 25%
  .title
    font-family: 'Lato', sans-serif
    font-weight: 300
    margin-bottom: 50px
  .content
    font-family: 'Lato', sans-serif
    font-size: 16px
    font-weight: 400
    line-height: 2em
     
.two-part-feature
  width: 100%
  margin-top: 150px
  .left-part, .right-part
    width: 50%
    display: inline-block
    vertical-align: top
  .left-part.with-text, .right-part.with-text
    padding-left: 10%
    box-sizing: border-box
  .title
    font-family: 'Lato', sans-serif
    font-weight: 300
    margin-bottom: 30px
  .content
    font-family: 'Lato', sans-serif
    font-size: 16px
    font-weight: 400
    line-height: 2em
    width: 90%
  img
    width: 80%
    margin-left: 10%
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25), 0 -1px 10px rgba(0, 0, 0, 0.25)

.footer
  width: 100%
  font-family: 'Lato', sans-serif
  font-size: 18px
  box-sizing: border-box
  padding: 20px 0
  color: rgba(0, 0, 0, 0.7)
  .content
    width: 70%
    margin: 0 auto
    display: flex
    flex-direction: column
    align-items: center
    justify-content: center
    .info
      margin-bottom: 20px
      font-size: 30px
      a
        margin-right: 30px
        &:last-child
          margin-right: 0
a
  color: inherit

.in-action
  margin: 150px 0
  font-family: 'Lato', sans-serif
  text-align: center
  h1
    font-weight: 300
  video
    width: 70%
    margin-top: 50px
